<script setup>
    // 一，声明式渲染
    const name = "careathers"
    const age = 18

    // 二，响应式数据
    import { ref, reactive } from "vue"
    // 1.ref响应式数据，在js中使用需要 .value，在标签中可直接使用
    const location = ref("HuNan")

    // 在js中修改ref的值
    const modify = (locationValue) => {
      location.value = locationValue
    }

    // 2.reactive响应式数据，只能生成响应式对象
    const student = reactive({
      studentID: 2325253639,
      school: "ChangShaSocialWorkCollege"
    })



    

</script>

<template>
  <div>
    <!-- ref响应式数据 -->
    <p>{{ name }}</p>
    <i>{{ age }}</i><br>
    <em>地址：{{ location }}</em><br>
    <button @click="modify('湖南')">湖南</button>
    <button @click="modify('北京')">北京</button><br>
    <hr>
    <!-- reactive响应式对象 -->
    <h4>学生信息</h4>
    <p>学号：{{ student.studentID }}</p>
    <p>学校：{{ student.school }}</p>
  </div>
</template>

<style scoped>

</style>